<template>
    <h3>prop参数传递</h3>
    <p>{{title}}</p>
    <ul>
        <li v-for="(value,index) in names" :key="index" :id="index">{{ value }}</li>
    </ul>
    {{ counter }}
    <button v-on:click="callback('Jack')">click</button>

    <button @click="sendToParent">发送给父元素</button>
</template>

<script setup> 
import {computed, ref} from "vue";
import {useStore} from "vuex";

const store = useStore();
const counter = computed(()=>store.getters.getCounter);

//接受的参数可以申明任意类型
const props = defineProps({
    title:{
        type:String,
        required:true
    },
    content:{
        type:String,
        required:true
    },
    names:{
        type:Array
    },
    callback:{
        type:Function
    }
});
console.log(props.content);
// console.log(context);

const message = ref("this message from child component");
//定义事件发送类型 通过emit发送数据给父组件
const emit = defineEmits(["onEvent"]);
const sendToParent = (event)=>{
    emit("onEvent",message.value);
}
</script>

<style scoped>
</style>